import React, { Component } from 'react'
import { API } from '../../utils/api'
import { BASE_URL } from '../../utils/url'
import { WingBlank,Flex } from 'antd-mobile'
import '../News/index.scss'
export default class News extends Component {
    state = {
        newsInfo: []
    }

    async getNews() {
        const res = await API.get('/home/news?area=AREA|a6649a11-be98-b150')
        console.log(res);
        this.setState({
            newsInfo: res.data.body
        })
        console.log(this.state);
    }

    async componentDidMount() {
        await this.getNews()
    }

    // 渲染最新资讯
    renderNews() {
        return this.state.newsInfo.map(item => (
            <div className="news-item" key={item.id}>
                <div className="imgwrap">
                    <img
                        className="img"
                        src={BASE_URL + item.imgSrc}
                        alt=""
                    />
                </div>
                <Flex className="content" direction="column" justify="between">
                    <h3 className="title">{item.title}</h3>
                    <Flex className="info" justify="between">
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                    </Flex>
                </Flex>
            </div>
        ))
    }

    render() {
        return (
            <div>
                <div className='groups-content'>
                    <div className="news">
                        <h3 className="group-title">最新资讯</h3>
                        <WingBlank size="md">{this.renderNews()}</WingBlank>
                    </div>
                    <h5 className='group-footer'>暂无更多数据 ~</h5>
                </div>
            </div>
        )
    }
}
